<template>
  <div class="suggest">
    <v-showTitle :titleImg='titleImg'/>
    <div class="suggest_container" ref="suggest">
      <ul class="suggest-list" ref="suggestList">
        <li class="suggest-item" v-for="(v, i) in data" :key="i" @click="_skipDetail(v.goodsSkuId)">
          <div class="img">
            <img :src="v.goodsLogo" width="124" height="147" alt="">
          </div>
          <div class="name">{{v.goodsName}}</div>
          <div class="price">
            <span class="text">当前价格</span>
            <span class="text num">￥{{v.platformRetailPrice}}</span>
          </div>
          <div class="end-time">
            <span class="text">描述:</span>
            <span class="desc">{{v.remark}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import showTitle from './showTitle'
  import BScroll from 'better-scroll'
  import CountDown from '@c/countDown/countDown'
  import goodImg1 from '@imgs/home/goods/g1.png'
  import goodImg2 from '@imgs/home/goods/g2.png'
  import { Connect } from '@api/apiUrl'
  import { formatDate } from '@js/formatDate.js'
  import { getSustemTime, getCurrentTime, doCountDown, countDown } from '@js/until.js'
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'

  export default {
    name: 'suggest',
    data() {
      return {
        titleImg: 'tuijian',
        scroll: {},
        data: [],
      }
    },

    components: {
      'v-showTitle': showTitle,
      'count-down': CountDown,
    },

    computed: {},

    methods: {
      // 产品左右滑动
      _initScroll() {
        if (this.data) {
          let foodWidth = 124
          let margin = 8
          let width = (foodWidth + margin) * this.data.length + margin
          this.$refs.suggestList.style.width = width + 'px'
          this.$nextTick(() => {
            if (this.scroll) {
              this.scroll = new BScroll(this.$refs.suggest, {
                click: true,
                scrollX: true,
                hasVerticalScroll: true,
              })
            } else {
              this.scroll.refresh()
            }
          })
        }
      },
      // 获得推荐产品
      _getSuggest() {
        vpost(vlink.home.suggest).then(re => {
          if (re.status === 0) {
            re.data.forEach(item => {
              doCountDown(item, this.timer)
            })
            this.data = re.data
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
      // 跳转产品详情页
      _skipDetail(id) {
        this.$router.push({
          name: 'DealDetail',
          path: '/dealDetail',
          query: {
            id: id,
          },
        })
      },
    },

    mounted() {
      this._initScroll()
      this._getSuggest()
    },
    watch: {
      data() {
        this._initScroll()
      },
    },
  }
</script>
